<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="box">
		<!-- 	<h2>今天天气{{weather}}</h2> -->
		<!-- 去掉模板中的属性调用 则vue实例不会更新-->
		<h2>今天天气一般</h2>
			<button @click='changeWeather'>点我切换天气</button>
		<!-- 如果方法逻辑只有一条语句，我们也可以写成如下形式 多条语句建议写入方法里-->
		<!-- <button @click='isHot=!isHot;'>点我切换天气</button> -->
		</div>

		<script>
			Vue.config.productionTip = false;
			let vm=new Vue({
				el: "#box",
				data: {
					isHot: true

				},
				methods:{
					changeWeather(){
						this.isHot=!this.isHot
						alert(1)
					}
				},
				computed:{
					weather(){
						return this.isHot?"炎热":"凉爽"
					}
				}
			})
		</script>
	</body>
</html>
